<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue2 根组件与 Vue3 根组件 template 配置项上的不同：
        Vue3:
          当有配置 template 时，使用 template 去覆盖挂载点元素的 innerHTML

        Vue2:
          当有配置 template 时，使用 template 去覆盖整个挂载点元素

      Vue2 组件上使用 v-model 的情况：
        
          v-model="msg"

        Vue2: 
          :value="msg"  @input="msg = $event"
          :value="name" @input="name = $event"
        Vue3:
          :modelValue="msg" @update:modelValue="msg = $event"

     -->

    <div id="app"></div>

    <script src="../lib/vue-2.js"></script>

    <script>
      Vue.component("Person", {
        template: `
          <div>
            <p>姓名：{{ value }}</p>
            <button @click="$emit('input', '张三')">修改 - 张三</button>
            <button @click="$emit('input', '里斯')">修改 - 里斯</button>
            <button @click="$emit('input', '王五')">修改 - 王五</button>
          </div>
        `,
        props: ["value"],
      });

      new Vue({
        el: "#app",
        data: {
          name: "王八",
        },

        template: `
          <div>
            <h1>根组件</h1>
            <Person v-model="name" />  
          </div>
        `,
      });
    </script>
  </body>
</html>
